<template>
<div class="road-more">
      <div class="wy-main-title  wy-m-t-20 info-1200">
          <p>首页  /  物流信息服务  /  线路信息 / <span>更多线路</span></p>
      </div>
      <div class="road-more-content info-1200">
          <div class="r-hot-title">
                <span></span>
                <span>热门线路</span>
                <img src="./../../../static/img/index/hot.png">
          </div>
          <div class="r-hot-city">
            <ul>
              <li>
                  <nuxt-link :to="`/info/road/list`">
                    <span>昆明市</span>
                    <span></span>
                    <span>广州市</span>
                  </nuxt-link>
              </li>
              <li>
                  <nuxt-link :to="`/info/road/list`">
                    <span>昆明市</span>
                    <span></span>
                    <span>广州市</span>
                  </nuxt-link>
              </li>
              <li>
                  <nuxt-link :to="`/info/road/list`">
                    <span>昆明市</span>
                    <span></span>
                    <span>广州市</span>
                  </nuxt-link>
              </li>
               <li>
                  <nuxt-link :to="`/info/road/list`">
                    <span>昆明市</span>
                    <span></span>
                    <span>广州市</span>
                  </nuxt-link>
              </li>
              <li>
                  <nuxt-link :to="`/info/road/list`">
                    <span>昆明市</span>
                    <span></span>
                    <span>广州市</span>
                  </nuxt-link>
              </li>
              <li>
                  <nuxt-link :to="`/info/road/list`">
                    <span>昆明市</span>
                    <span></span>
                    <span>广州市</span>
                  </nuxt-link>
              </li>
              <li>
                  <nuxt-link :to="`/info/road/list`">
                    <span>昆明市</span>
                    <span></span>
                    <span>广州市</span>
                  </nuxt-link>
              </li>
              <li>
                 <nuxt-link :to="`/info/road/list`">
                    <span>昆明市</span>
                    <span></span>
                    <span>广州市</span>
                  </nuxt-link>
              </li>
              <li>
                  <nuxt-link :to="`/info/road/list`">
                    <span>昆明市</span>
                    <span></span>
                    <span>广州市</span>
                  </nuxt-link>
              </li>
              <li>
                  <nuxt-link :to="`/info/road/list`">
                    <span>昆明市</span>
                    <span></span>
                    <span>广州市</span>
                  </nuxt-link>
              </li>
            </ul>
          </div>
      </div>
     <!-- 城市 -->
      <div class="road-startCity">
          <a-form :form="form" class='info-1200'>
              <a-row :gutter='24' class='city-form'>
                <a-col :span='5' class='s-place-190'>
                    <a-form-item label="出发地:"  :label-col="{ span: 6}" :wrapper-col="{ span:18 }">
                        <a-input  placeholder="请选择出发地"/>
                    </a-form-item>
                </a-col>
                <a-col :span='5' class='s-place-190'>
                    <a-form-item label="到达地:"  :label-col="{ span: 8}" :wrapper-col="{ span:16}">
                        <a-input  placeholder="请选择车辆到达地"/>
                    </a-form-item>
                </a-col>
                <a-col :span='6' class='s-place-140'>
                    <a-form-item label="公司名称:"  :label-col="{ span: 10}" :wrapper-col="{ span:14 }">
                        <a-input  placeholder="全部"/>
                    </a-form-item>
                </a-col>
                <a-col :span='8'>
                    <a-button type="primary" :span='2' style='margin:0 20px 0 20px;' class='ant-btn-primary'>搜索</a-button>
                    <a-button :span='2'>重置</a-button>
                </a-col>
              </a-row>
          </a-form>
      </div>
     <!-- 省内和省外的切换 -->
      <div class="province-change info-1200">
          <div class="r-hot-title r-hot-title-hasline">
                <span></span>
                <span>昆明</span>
          </div>
          <a-tabs defaultActiveKey="1">
              <a-tab-pane tab="省内线路" key="1">
                <ul>
                  <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                     <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                    <li>
                     <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                    <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                     <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                     <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                     <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                   <li>
                     <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                     <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                     <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                   <li>
                     <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                     <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                   <li>
                     <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                   <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                   <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                  <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                   <li>
                      <nuxt-link :to="`/info/road/list`">
                         <span>昆明市</span>
                         <span></span>
                         <span>广州市</span>
                      </nuxt-link>
                  </li>
                </ul>
              </a-tab-pane>
              <a-tab-pane tab="省外线路" key="2">
                <ul>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                       <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                       <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                      <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                       <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                       <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                       <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                       <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                       <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                       <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                     <li>
                       <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                       <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                       <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                    <li>
                        <nuxt-link :to="`/info/road/list`">
                           <span>昆明市</span>
                           <span></span>
                           <span>广州市</span>
                        </nuxt-link>
                    </li>
                </ul>
              </a-tab-pane>
          </a-tabs>
      </div>
</div>
</template>
<script>
  

</script>
<style lang="scss">
.road-more{
  .info-1200{
       width:1200px;
       margin:0 auto;
  }
    .wy-m-t-20{
        margin-top:20px;
    }
   .r-hot-title-hasline{
    padding-bottom:24px !important;
    border-bottom:1px solid #E8E8E8;
   }
  .r-hot-title{
         padding-bottom:4px;
       span{
         display:inline-block;
         }
       span:first-child{
        width:6px;
        height:15px;
        background:#15837A;
        margin-right:16px;
        vertical-align:middle;
       }
       span:nth-child(2){
        vertical-align:middle;
        line-height:15px;
        font-size:16px;
        color:#15837A;
       }
       img{
        vertical-align:middle;
        margin-left:8px;
       }
       a{
        float:right;
         color:#666666;
         font-size:14px;
       }
     }
     .road-more-content{
        margin-top:20px;
      height:180px;
     .r-hot-city{
      ul {
        margin:0;
        padding:0;
        li{
          width:200px;
          height:40px;
          float:left;
          margin-right:20px;
          margin-top:20px;
          background:#E9F4F3;
          font-size:14px;
          text-align:center;
          line-height:40px;
          a{
            color:#15837A;
          }
          span:nth-child(2){
            width:16px;
            height:1px;
            background:#15837A;
            margin:0 10px;
            display:inline-block;
            vertical-align:middle;
          }
           }
           li:nth-child(5){
             margin-right:0;
           }
            li:nth-child(10){
             margin-right:0;
           }
           li:hover{
              background:#15837A;
              cursor: pointer;
              a{
                 color:#FFFFFF;
              }
              span:nth-child(2){
                background:#FFFFFF;
              }
           }
      }
     }
    }
 .road-startCity{
     width:100%;
     height:70px;
     background:#F9F9F9;
     form{
       padding-top: 16px;
         height: 56px;
     }
     .ant-form-item-label label{
        font-size:16px;
        color:#333333;
        font-weight:400;
       }
      .ant-form-item-control{
        width:190px;
        height:40px;
        input{
          font-size:14px;
          color:#999999;
          height:40px;
        }
       }
   }
  .province-change{
      margin-top:24px;
      margin-bottom:200px;
     .ant-tabs{
        margin-top:24px;
     }
     .ant-tabs-nav .ant-tabs-tab{
        color:#333333;
        padding:0px !important;
        width: 90px !important; 
        height: 30px !important;
        line-height: 30px !important;
        text-align: center !important;
        margin:0px !important;
        margin-right:20px !important;
        font-size:16px;
    }
    .ant-tabs-nav .ant-tabs-tab-active{
        background:#15837A !important;
        border-bottom:none;
        color:#FFFFFF !important;
    }
    .ant-tabs-ink-bar{
        bottom:0;
        height:0;
    }
    .ant-tabs-bar{
        border:none;
        margin:0;
    }
      ul{
         margin:0;
         padding:0;
         width:1120px;
         margin:0 auto;
         margin-top:30px;
        li{
           width:140px;
           height:30px;
           font-size:14px;
           float:left;
           line-height:30px;
           text-align:center;
           margin-top:10px;
           a{
             color:#333333;
           }
           span:nth-child(2){
            width:16px;
            height:1px;
            background:#333333;
            margin:0 6px;
            display:inline-block;
            vertical-align:middle;
         }
        }
        li:hover{
          background:#E9F4F3;
           cursor: pointer;
          a{
            color:#15837A;
          }
          span:nth-child(2){
            background:#15837A;
          }

        }
      }
  }
}
</style>